<template>
    <div :class="[flag ? 'sunActive' : 'moonActive']">
        <el-icon v-if="flag" @click="handleChange"><Sunny /></el-icon>
        <el-icon v-else @click="handleChange"><Moon /></el-icon>
        <el-tabs type="border-card">
            <el-tab-pane label="账号密码登录">
                <el-form :model="form" :rules="rules">
                    <el-form-item label="用户名" prop="username" label-width="80">
                        <el-input v-model="form.username" />
                    </el-form-item>
                    <el-form-item label="密码" prop="password" label-width="80">
                        <el-input v-model="form.password" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确认</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="短信验证码登录">Config</el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const flag = ref(false)

const handleChange = () =>{
    flag.value = !flag.value
}

const rules = {
    username: [{
        required: true,
        message: '用户名不可以为空'
    }],
    password: [{
        required: true,
        message: '密码不能为空'
    }]
}
const form = reactive({
    username: '',
    password: ''
})

const onSubmit = () => {
    // 本地存储
    localStorage.setItem('username', form.username)

    setTimeout(() => {
        router.push({ path: '/' })
    }, 1000)
}
</script>


<style lang="scss" scoped>
.sunActive{
    width: 100vw;
    height: 100vh;
}
.moonActive{
    width: 100vw;
    height: 100vh;
    background-color: rgb(1, 6, 8);

    .el-icon{
        color: #fff;
    }
    .el-tabs, .el-tabs--top, .el-tabs--border-card{
        background-color: #000;
    }
}


.el-tabs {
    position: fixed;
    left: 50%;
    top: 100px;
    width: 600px;
    height: 400px;
    transform: translate(-50%);
}
</style>